<template>
  <div class="container dark-theme">
    <div class="screen">
      <div class="login-box">
        <div class="title-box">手机号快捷登录</div>
        <el-form
          class="login-form"
          :model="loginForm"
          :rules="loginFormRules"
          ref="loginFormRef"
        >
          <!-- 手机号 -->
          <el-form-item prop="phone">
            <el-col :span="2">
              <i class="iconfont icon-r-user1" style="font-size: 28px; color: #4fc3f7"></i>
            </el-col>
            <el-col :span="22">
              <el-input
                v-model="loginForm.phone"
                placeholder="请输入手机号"
                clearable
              ></el-input>
            </el-col>
          </el-form-item>
          <!-- 验证码 + 发送按钮 -->
          <el-form-item prop="code">
            <el-col :span="2">
              <i class="iconfont icon-r-lock" style="font-size: 28px; color: #4fc3f7"></i>
            </el-col>
            <el-col :span="14">
              <el-input
                v-model="loginForm.code"
                placeholder="请输入验证码"
                clearable
              ></el-input>
            </el-col>
            <el-col :span="8">
              <el-button
                type="success"
                @click="sendCode"
                :disabled="disabled"
                style="width: 100%; font-size: 18px; padding: 12px; background: #014b75; border: none;"
                class="secondary-btn"
              >
                {{ codeBtnMsg }}
              </el-button>
            </el-col>
          </el-form-item>
          <!-- 协议选择 -->
          <el-form-item>
            <el-checkbox v-model="isAgreed" style="color: #b0bec5;">
              我已阅读并同意
              <a href="javascript:void(0)" style="color: #4fc3f7;">《用户服务协议》</a>、
              <a href="javascript:void(0)" style="color: #4fc3f7;">《隐私政策》</a>
            </el-checkbox>
          </el-form-item>
          <!-- 登录按钮 -->
          <el-form-item class="btns login-btn">
            <el-button
              style="font-size: 24px"
              :round="true"
              type="primary"
              @click="login"
            >
              登录
            </el-button>
          </el-form-item>

        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';



export default {
  name: "LoginByCode",
  data() {
    return {
      loginForm: {
        phone: "",
        code: ""
      },
      isAgreed: false,
      disabled: false,
      codeBtnMsg: "发送验证码",
      loginFormRules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入有效的中国大陆手机号",
            trigger: "blur"
          }
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 6, max: 6, message: "验证码应为6位", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    async login() {
      if (!this.isAgreed) {
        this.$message.error("请先同意用户协议！");
        return;
      }

      if (!this.loginForm.phone || !this.loginForm.code) {
        this.$message.error("手机号和验证码不能为空！");
        return;
      }

      axios.post("/users/user/login", this.loginForm).then(({ data }) => {
        if (data.data && data.success) {
          const token = data.data;  // 直接取 data 字段
          sessionStorage.setItem("token", token);
          location.href = "/credit-management";
        } else {
          this.$message.error(data.msg || "登录失败");
        }
      });
    },

    async sendCode() {
      if (!this.loginForm.phone) {
        this.$message.error("手机号不能为空");
        return;
      }

      const phoneRule = /^1[3-9]\d{9}$/;
      if (!phoneRule.test(this.loginForm.phone)) {
        this.$message.error("请输入有效的中国大陆手机号");
        return;
      }

      try {
        // 🔧 注意这里的路径：没有 /api
        await axios.post(`/users/user/code`, null, {
          params: { phone: this.loginForm.phone },
          withCredentials: true
        });

        this.$message.success("验证码发送成功");
        this.disabled = true;
        let seconds = 5;
        this.codeBtnMsg = `${seconds--}秒后可重发`;
        const timer = setInterval(() => {
          if (seconds <= 0) {
            clearInterval(timer);
            this.codeBtnMsg = "发送验证码";
            this.disabled = false;
          } else {
            this.codeBtnMsg = `${seconds--}秒后可重发`;
          }
        }, 1000);
      } catch (err) {
        this.$message.error("验证码发送失败：" + (err.response?.data?.msg || err.message));
      }
    },


  }
};
</script>

<style scoped>
.container.dark-theme {
  background: radial-gradient(ellipse at center, #001e3c 0%, #000 100%);
  min-height: 100vh;
  color: #fff;
  font-family: 'Microsoft YaHei', sans-serif;
}
.screen {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.login-box {
  width: 450px;
  background: #003b64;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 15px rgba(30, 136, 229, 0.5);
  opacity: 0.9;
}
.title-box {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #4fc3f7;
  margin-bottom: 20px;
}
.login-form {
  width: 100%;
  box-sizing: border-box;
}
.login-form .el-input__inner {
  background: #012c4a;
  border: 1px solid #4fc3f7;
  color: #fff;
}
.login-form .el-input__inner::placeholder {
  color: #b0bec5;
}
.btns.login-btn {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.btns.login-btn .el-button {
  width: 80%;
  max-width: 85px;
  padding: 14px 213px;
  font-weight: bold;
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
  box-shadow: 0 2px 8px rgba(41, 182, 246, 0.3);
  transition: all 0.3s ease;
}
.btns.login-btn .el-button:hover {
  background: linear-gradient(135deg, #29b6f6 0%, #4fc3f7 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(41, 182, 246, 0.5);
}
.btns.login-btn .el-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btns.secondary-btns {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.btns.secondary-btns .el-button,
.secondary-btn {
  flex: 1;
  padding: 12px 24px;
  font-weight: bold;
  border: none;
  color: #fff;
  background: #014b75;
  box-shadow: 0 2px 8px rgba(1, 75, 117, 0.3);
  transition: all 0.3s ease;
}
.btns.secondary-btns .el-button:hover,
.secondary-btn:hover {
  background: #016a9b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(1, 106, 155, 0.5);
}
.btns.secondary-btns .el-button:active,
.secondary-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.iconfont {
  font-size: 24px;
  color: #4fc3f7;
}
</style>
